<template>
  <div class="imgUploadContainer">
    <div class="imgUploadPanel">
      <div class="upBtn" v-if="!modelValue">
        <label
          for="imgUploadInput"
          class="imgUploadInputArea"
          @dragenter.stop.prevent
          @dragover.stop.prevent
          @drop.stop.prevent="onDrop"
          >点击此处选择图片、或拖动图片到此</label
        >
        <input type="file" accept="image/*" id="imgUploadInput" @change="onImgUploadInputChange" />
      </div>
      <div v-if="modelValue" class="uploadInfoBox">
        <div class="previewBox" :style="{ backgroundImage: `url('${modelValue}')` }" />
        <span class="delBtn el-icon-close" @click="deleteImg" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["modelValue"],
  emits: ["update:modelValue"],
  data() {
    return {
      file: null
    }
  },
  methods: {
    /**
     * @Desc: 图片选择事件
     */
    onImgUploadInputChange(e) {
      const file = e.target.files[0]
      this.selectImg(file)
    },

    /**
     * @Desc: 拖动上传图片
     */
    onDrop(e) {
      const dt = e.dataTransfer
      const file = dt.files && dt.files[0]
      this.selectImg(file)
    },

    /**
     * @Desc: 选择图片
     */
    selectImg(file) {
      this.file = file
      const fr = new FileReader()
      fr.readAsDataURL(file)
      fr.onload = (e) => {
        this.$emit("update:modelValue", e.target.result)
      }
    },

    /**
     * @Desc: 获取图片大小
     */
    getSize() {
      return new Promise((resolve) => {
        const img = new Image()
        img.src = this.modelValue
        img.onload = () => {
          resolve({
            width: img.width,
            height: img.height
          })
        }
        img.onerror = () => {
          resolve({
            width: 0,
            height: 0
          })
        }
      })
    },

    /**
     * @Desc: 删除图片
     */
    deleteImg() {
      this.$emit("change", "")
      this.file = null
    }
  }
}
</script>

<style lang="less" scoped>
@import "./style.less";
</style>
